<template>
  <div class="box">
    <div class="wrapper">
      <ul>
        <li
          v-for="item in moviesList"
          :key="item._id"
          @click="toDetail(item.movieid)"
        >
          <div class="pic">
            <img :src="item.img.split('/w.h').join('/64.90')" alt="" />
          </div>
          <div class="info">
            <div class="titleTag">
              <div class="title">{{ item.nm }}</div>
              <div
                v-if="item.version"
                class="tag"
                :class="{
                  tag3dMax: item.version == 'v3d imax',
                  tag2dMax: item.version == 'v2d imax',
                  tag3d: item.version == 'v3d',
                }"
              ></div>
              <div class="preshow" v-if="item.preShow"></div>
            </div>
            <div class="score" v-if="!item.preShow && item.sc">
              观众评 <span>{{ item.sc }}</span>
            </div>
            <div v-else-if="!item.preShow && !item.sc">暂无评分</div>
            <div v-else>
              <span>{{ item.wish }}</span
              >人想看
            </div>
            <div class="starr">主演:{{ item.star }}</div>
            <div class="showInfo">{{ item.showInfo }}</div>
          </div>
          <div class="btn">
            <button :class="{ pre: item.showst == 4 }">
              {{ item.showst == 4 ? "预售" : "购票" }}
            </button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import { moviesApi, getMoreApi } from "@/api/home.js";
import { mapState } from "vuex";

export default {
  computed: mapState("hot", ["moviesList"]),
  // computed: mapState({
  //   moviesList: (state) => state.hot.moviesList,
  // }),
  methods: {
    toDetail(id) {
      this.$router.push("/detail/" + id);
    },
  },

  // data() {
  //   return {
  //     list: [],
  //     // 所有的电影id组成的数组
  //     ids: [],
  //     // 电影的总条数
  //     count: 0,
  //   };
  // },
  // mounted() {
  //   this.getMoviesList();
  // },
  // methods: {
  //   async getMoviesList() {
  //     const res = await moviesApi();
  //     // console.log(res);
  //     this.list = res.result;
  //     this.ids = res.ids;
  //     this.count = res.count;
  //     await this.$nextTick();
  //     this.$emit("succ");
  //   },

  //   async getMore() {
  //     const arr = this.ids.slice(this.list.length, this.list.length + 6);
  //     // console.log(arr);

  //     const res = await getMoreApi({ ids: arr.join(",") });
  //     // console.log(res);
  //     // 将加载更多的数据拼接到原来的list
  //     this.list = [...this.list, ...res.result];

  //     await this.$nextTick();

  //     this.$emit("finish", this.list.length === this.count);
  //   },

  //   toDetail(id) {
  //     this.$router.push("/detail/" + id);
  //   },
  // },
};
</script>
<style lang="less" scoped>
// @import url("../../../../../assets/css/var.less");
.box {
  ul {
    li {
      height: 114px;
      width: 100%;
      background-color: #fff;

      padding: 12px 14px;

      .center();
      .pic {
        width: 64px;
        height: 90px;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      button {
        background-color: @theme-color;
        width: 54px;
        height: 28px;
        border-radius: 14px;
        border: none;
        color: white;
        box-shadow: 0 0.04rem 0.04rem 0 rgb(240 61 55 / 15%);
      }
      .pre {
        background-color: #3c9fe6;
      }
      .info {
        width: 220px;
        height: 100%;
        font-size: @xs-font;
        border-bottom: #eaeaea 2px solid;
        > div {
          margin-top: 6px;
          height: 18px;
          line-height: 18px;
          .ell();
          span {
            font-size: @m-font;
            font-weight: 700;
            color: #faaf00;
            margin-left: 5px;
          }
          &:first-child {
            margin: 0;
          }
        }
        .titleTag {
          display: flex;
          align-items: center;
          .title {
            font-size: @l-font;
            color: #333;
            font-weight: 700;
            margin-right: 5px;
            .ell();
          }
          .tag {
            width: 43px;
            height: 14px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
          }
          .tag2dMax {
            background-image: url("	https://obj.pipi.cn/festatic/touchnode/resources/images/dpmmweb/hot-tab/img/base64/v2dimax.png");
          }
          .tag3dMax {
            background-image: url("https://obj.pipi.cn/festatic/touchnode/resources/images/dpmmweb/hot-tab/img/base64/v3dimax.png");
          }
          .tag3d {
            background-image: url("https://obj.pipi.cn/festatic/touchnode/resources/images/dpmmweb/hot-tab/img/base64/v3d.png");
          }
          .preshow {
            width: 43px;
            height: 14px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            background-image: url("https://obj.pipi.cn/festatic/touchnode/resources/images/dpmmweb/hot-tab/img/base64/pre-show.png");
          }
        }
      }
    }
  }
}
</style>
